<template>
	<view class="content">
		<u-search class="search" placeholder="请输入搜索信息" :showAction="true" actionText="取消" :animation="true"
			@change="changeFn" @search="getVideoList" input-align="center" placeholderColor="#C2C7CC"
			searchIconColor="#C2C7CC" bgColor="#fff" borderColor="#0084FF" :show-action="false"
			v-model="searchForm.name" @custom="cancelFn" @clear="clearFn"> </u-search>
		<view class="search_model">
			<uni-data-select style="width: 40%" class="select" placeholder="专业类型" v-model="searchForm.profession"
				:localdata="majorTypeList" @change="getVideoList"></uni-data-select>
			<text class="reset" @click="resetFn">全部</text>
		</view>

		<scroll-view scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolowerFn" class="video_list">
			<image v-if="videoList.length == 0" src="../../static/images/empty.svg" class="empty_img"></image>
			<div class="video_model" v-for="(item, index) in videoList" :key="index">
				<!-- <div class="video" :id="'video' + index"></div> -->
				<!-- <video v-if="item.fileVo" ref="videoPlayer" :src="item.fileVo.downloadUrl" :controls="true" :enable-progress-gesture="true" :show-progress-bar="true"></video> -->
				<image style="width: 100%; height: 180rpx" v-if="item.cover" :src="baseUrl + item.cover"></image>
				<image style="width: 100%; height: 180rpx" v-else src="../../static/images/empty_video.svg"></image>

				<div class="video_info" @click="handleVideoInfo(item)">
					<view class="title">
						<h3>{{ item.fileName }}</h3>
						<view @click.stop="collectionFn(item)">
							<image
								:src="item.collect === 1 ? '../../static/images/start1.svg' : '../../static/images/start.svg'"
								style="width: 36rpx; height: 32rpx"></image>
						</view>
					</view>
					<view class="author">
						<text>作者名称：</text>
						<text>{{ item.author }}</text>
					</view>
					<view class="blurb intro">
						<text>课程简介：</text>
						<text>{{ item.introduction }} </text>
					</view>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	import config from '@/config'
	
	export default {
		data() {
			return {
				searchForm: {
					name: '',
					profession: ''
				},
				majorTypeList: [],
				videoList: [],
				vodeSrc: '',
				scrollTop: 0,
				pageNumber: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0,
				baseUrl: ''
			};
		},
		watch: {
			"searchForm.name": {
				handler(newVal, oldVal) {
					console.log(newVal, "fffff");
					if (newVal) {
						clearTimeout(this.timer);
						this.timer = setTimeout(() => {
							this.getVideoList();
						}, 1500);
					}
				},
			},
		},
		onShow() {
			this.baseUrl = uni.$config.baseUrl
			this.pageNumber = 1
			this.pageSize = 10
			this.totalPage = 0
			this.totalSize = 0
			this.majorTypeListFn()
			this.getVideoList()
		},
		onLoad() {

		},
		methods: {
			majorTypeListFn() {
				console.log("pp");
				this.$request({
					url: "/dict/major/list",
					method: "GET",
					params: {},
				}).then(({
					data
				}) => {
					data.data.forEach((item) => {
						this.majorTypeList.push({
							value: item.id,
							text: item.name,
							dictCode: item.dictCode,
						});
					});
				});
			},
			changeFn(e) {
				console.log("eeee", e);
			},
			getVideoList() {
				this.$request({
					url: "/knowledgeTrain/list",
					method: "get",
					params: {
						pageNumber: this.pageNumber,
						pageSize: this.pageSize,
						...this.searchForm
					},
				}).then(({
					data
				}) => {

					if (this.pageNumber === 1) {
						this.videoList = []
						this.scrollTop = 0
					}
					this.totalPage = data.totalPage
					this.totalSize = data.totalSize
					if (data.data) {
						this.videoList = this.videoList.concat(data.data)
					}
					// this.$forceUpdate();
				});
			},
			cancelFn() {
				this.searchForm.name = "";
				this.getVideoList();
			},
			clearFn() {
				this.searchForm.name = "";
				this.getVideoList();
			},
			resetFn() {
				this.searchForm.name = "";
				this.searchForm.profession = "";
				this.getVideoList();
			},
			// scroll 触底操作
			scrolltolowerFn(e) {
				console.log('看看滚动条这个事件', e)
				if (this.pageNumber >= this.totalPage) {
					this.loadmore = true
					return
				}
				this.pageNumber = this.pageNumber + 1
				if (this.pageNumber > this.totalPage) {} else {
					this.getVideoList()
				}
			},
			collectionFn(item) {
				let url = item.collect === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
				this.$request({
					url: url,
					method: "post",
					data: {
						collectType: "2",
						knowledgeFileId: item.id,
					},
				}).then(({
					data
				}) => {
					if (item.collect === 1) {
						this.$toast("已取消收藏");
						item.collect = 0;
						item.collectNumber--;
					} else {
						this.$toast("已收藏");
						item.collect = 1;
						item.collectNumber++;
					}

					// this.getVideoList()
				});
			},
			handleVideoInfo(item) {
				this.$tab.navigateTo(`/pages/onlineTraining/videoInfo?id=${item.id}`);
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-placeholder,
	::v-deep .uni-input-input {
		text-align: left;
	}

	.content {
		//   min-height: 100vh;
		width: 100%;
		background: #f5f7fb;

		.search_model {
			background: #fff;
			width: 94vw;
			display: flex;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10rpx;
			margin: 0 auto;
			height: 72rpx;

			text {
				width: 50%;
				text-align: center;
				color: #4c5a67;
			}
		}

		.search {
			width: 100%;
			display: flex;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select {
				width: 40% !important;
			}

			.uni-stat__select {
				flex: none;
			}

			.reset {
				color: #02a7f0;
				margin-left: 30rpx;
				font-size: 30rpx !important;
			}
		}

		.tki-tree-view {
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			left: 0rpx;
			top: 200rpx;
			background-color: #fff;
			padding-top: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 20rpx;
			padding-left: 20rpx;

			.tki-tree-view-sc {
				height: 100%;
				overflow: hidden;
			}
		}

		.video_list {
			height: 75vh;
			// margin: 20rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;

			.video_model {
				width: 100%;
				height: 400rpx;
				border: 1px solid #e6e6e6;
				border-radius: 5px;
				margin-bottom: 20px;
				border-radius: 20rpx;
				overflow: hidden;
				background: #fff;

				.video {
					padding: 0px !important;
					width: 100% !important;
					// height: 200rpx !important;
				}

				#video {
					flex: auto;
				}

				.video_info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20rpx;
					line-height: 44rpx;
					color: #1c2126;

					.title {
						display: flex;
						// align-items: center;
						height: 100rpx;
						justify-content: space-between;

						h3 {
							// flex: 1;
							width: 90%;
							padding: 0;
							margin: 0;
							font-weight: 500;
							font-size: 15px;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							white-space: normal;
							max-height: 3em;
							/* 每行大约 1.5em，2 行就是 3em */
							line-height: 1.5em;
							/* 每行高度 */

						}

						view {
							margin-top: 5rpx;
						}
					}

					.author,
					.blurb {
						font-size: 14px;
						color: #1c2126;
						word-break: break-all;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;

						& text:nth-child(1) {
							color: #828d99;
						}

						&.intro {
							word-break: break-all;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	::v-deep uni-video {
		height: 180rpx !important;
	}

	::v-deep .uni-select {
		border: none !important;
	}

	::v-deep .uni-select__input-box {
		flex: none !important;
		width: 160rpx !important;
		font-size: 28rpx !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 28rpx !important;
	}

	::v-deep .video_list .uni-scroll-view-content {
		width: 94%;
		height: 75vh;
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}
</style>